// table-expand.vue
<style scoped>
.expand-row /deep/ td:last-child {
    border-right: 0 !important;
}
.expand-row /deep/ tr:last-child td {
    border-bottom: 0 !important;
}
.el-tag {
    background-color: rgba(64, 158, 255, 0.1);
    padding: 0 5px;
    color: #17b3a3;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, 0.2);
    white-space: nowrap;
}
.btn-color {
    background-color: hsla(220, 4%, 58%, 0.1);
    border-color: hsla(220, 4%, 58%, 0.2);
    color: #909399;
}
</style>
<template>
    <div>
        <Table class="expand-row" :columns="columns11" :data="row.children" :show-header="false">
            <template slot-scope="{ row }" slot="icon">
                <Icon :type="'ios-'+row.icon" />
            </template>
            <template slot-scope="{ row }" slot="type">
                <span v-if="row.type==1" class="el-tag">菜单</span>
                <span v-else-if="row.type==2" class="el-tag btn-color">按钮</span>
            </template>
        </Table>
    </div>
</template>
<script>
import expandRow from "./menu-expand";
export default {
    props: {
        row: Object
    },
    data() {
        return {
            columns11: [
                {
                    type: "expand",
                    width: 50,
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row
                            }
                        });
                    }
                },
                {
                    title: "名称",
                    key: "name",
                    width: 300,
                    render: (h, params) => {
                        // console.log(this.childStyles());
                        return h(
                            "div",
                            {
                                style: {
                                    paddingLeft: this.childStyles(params.row)
                                }
                            },
                            params.row.name
                        );
                    }
                },
                {
                    title: "上级菜单",
                    width: 120,
                    key: "parentName",
                    align: "center"
                },
                {
                    title: "图标",
                    slot: "icon",
                    align: "center"
                },
                {
                    title: "类型",
                    slot: "type",
                    align: "center"
                },
                {
                    title: "排序号",
                    key: "orderNum",
                    align: "center"
                },
                {
                    title: "菜单URL",
                    key: "url",
                    align: "center",
                    ellipsis: true
                },
                {
                    title: "授权标识",
                    key: "perms",
                    align: "center",
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    width: 149,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                        ghost: true
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {}
                                    }
                                },
                                "修改"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                        ghost: true
                                    },
                                    on: {
                                        click: () => {}
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ]
        };
    },
    created() {
        let that = this;
        this.row.children.forEach(v => {
            if ((!v.children && v.type == 1) || v.type == 2) {
                v["_disableExpand"] = true;
            }
        });
    },
    methods: {
        childStyles(row) {
            return (row["_level"] > 1 ? row["_level"] * 7 : 0) + "px";
        }
    }
};
</script>